<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>localStorage永久存储</title>
</head>
<body>
    <input type="text" id="con">
    <button onclick="saveValue()">存储数据</button>
    <button onclick="getValue()">获取数据</button>
    <button onclick="delValue()">删除数据</button>
    <button onclick="clearValue()">清空数据</button>

    <script>
        // 存储数据
        function saveValue(){
            let val = document.getElementById("con").value
            localStorage.setItem("username",val)
        }

        // 获取数据
        function getValue(){
            alert(localStorage.getItem("username"))
            
        }

        // 删除数据
        function delValue(){
            localStorage.removeItem("username")
        }

        // 清空数据
        function clearValue(){
            localStorage.clear()
        }

    </script>
</body>
</html>